import React,{Component} from 'react';
import {
  Link
} from 'react-router-dom';
import { getUserAddressList, deleteUserAddress } from 'api/user.js';
import LazyLoad from 'react-lazyload';
import AddressCard from './addressCard/addressCard.jsx';
import { message } from 'antd'
import './shipAddress.scss';
export default class ShipAddresss extends Component{
	constructor (props) {
		super(props)
		this.state={
			trade:'',
      addList: [],
      address_id:'',
      num:'card_hiden',
      address_id:''
		}
	}
	click = (add_id) => {
		this.setState({
			num:'',
      address_id:add_id
		})
	}
	click1 = () => {
		this.setState({
			num:'card_hiden'
		})
	}
	_deleteUserAddress = () => { //删除地址
		deleteUserAddress({
			address_id:this.state.address_id
		}).then(res =>{
			if (res.code === 1) {
				this.setState({
					num:'card_hiden'
				})
				this._getUserAddressList();
      } else {
      	this.click1()
      	message.warning(res.message, 2)
      }
		})
	}
	_getUserAddressList = () => { //获取地址列表
		getUserAddressList().then(res => {
      if (res.code === 1) {
        this.setState({
          addList: res.data
        })
      }
    })
	}
	componentDidMount () {
		this._getUserAddressList();
	}
	render(){
		return(
			<div className="shipAddress">
				<div className="loginBox">
					<Link to='/user'><span className="glyphicon glyphicon-back back"></span></Link>
					<div className="log_title">收货地址</div>
				</div>
				<div>
					{this.state.addList.map((item, index) => {
            return (
              <LazyLoad offsetTop={200} key={index} height={0}>
                <AddressCard addressList={{...item, hide: false}} click={this.click.bind(this)}/>
              </LazyLoad>
            )
          })}
				</div>
				<div className="add">
					<Link to="/user/shipAddress/addAddress"><span className="glyphicon glyphicon-add"></span>新增收货地址</Link>
				</div>
				<div className={`tanchu ${this.state.num}`}>
					<div>
						<p>确定要删除此收货地址吗？</p>
						<span onClick={this.click1}>取消</span><span onClick={this._deleteUserAddress}>确定</span>
					</div>
				</div>
			</div>
		)
	}
}